<template>
  <el-row  class="blog-details" >
    <!-- 左侧空白 -->
    <el-col :span="5">&nbsp;</el-col>

    <el-col :span="14">
      <!-- 页头信息 -->
      <div class="page-head">
        <span @click="backPageHandle" class="back">
          <i class="el-icon-back"></i>
          返回
        </span>
        <span class="separator">|</span>
        <span class="author">
          <svg-icon icon-class="user2" class="fz14"/>
          {{ blog.userName }}
        </span>

        <svg-icon icon-class="clock" class="ml10 fz14" style="color: rgb(135,212,237)" />
        <span>{{ blog.issueTime }}</span>

        <svg-icon icon-class="like" class="ml7 fz14" />
        点赞(<span class="number">{{ blog.likeNum }}</span>)

        <svg-icon icon-class="collect" class="ml7 fz14" />
        收藏(<span class="number">{{ blog.collectNum }}</span>)

        <svg-icon icon-class="comment" class="ml7 fz14" />
        评论(<span class="number">{{ blog.commentNum }}</span>)

        <svg-icon icon-class="view" class="ml7 fz14"/>
        浏览(<span class="number">{{ blog.viewNum }}</span>)
      </div>

      <!-- 博客标题 -->
      <div class="blog-title">
        {{ blog.title }}
      </div>

      <!-- 博客标签 -->
      <div class="blog-label">
        <svg-icon icon-class="label" class="icon" />
        <span class="label-title">
          {{ blog.label === 0 ? '原创' : blog.label === 1 ? '转载' : '翻译' }}博客
        </span>
      </div>

      <!-- 博客正文 -->
      <div class="ql-container ql-snow blog-content">
        <div v-html="blog.content" class="ql-editor"></div>
      </div>

      <!-- 博客标签 -->
      <div class="blog-tags">
        <span>博客标签</span>
        <span v-for="(tag, index) in blog.tagNames" class="tag" :style="{ border: '1px solid ' + colorList[index], color: colorList[index] }">
          {{ tag }}
        </span>
      </div>

      <!-- 博客版权 -->
      <div v-if="blog.showStatement === 0" class="blog-statement">
        <span>博客版权</span>
        <p>每一篇博客都是作者的辛勤付出，如需转载使用，请务必标明文章出处，谢谢。</p>
      </div>

      <!-- 博客评论 -->
      <div v-if="blog.openComment === 0" class="blog-comment">

        <div class="comment-header">
          <span>博客评论</span>
          <span @click="changeCommentSortHandle(0)" class="c-sort" :class="commentSort === 0 ? 'active' : ''">按点赞排序</span>
          <span @click="changeCommentSortHandle(1)" class="c-sort" :class="commentSort === 1 ? 'active' : ''">按时间排序</span>
        </div>
        <el-row class="comment-reply">
          <el-col :span="2" class="avatar">
            <!-- 用户头像 -->
            <el-avatar :size="55" :src="avatar" class="user-avatar">
              <img src="@/assets/image/common/empty-user.png" alt=""/>
            </el-avatar>
          </el-col>
          <el-col :span="18" class="A">
            <el-input
              type="textarea"
              placeholder="您可以输入回复博客信息"
              :rows="3"
              resize="none"
              v-model="blogComment"
              :disabled="!login"
              maxlength="500"
              show-word-limit
              clearable
            >
            </el-input>
          </el-col>
          <el-col :span="4" class="A">
            <el-button @click="saveCommentHandle()" :disabled="!login || buttonLoad" type="primary" class="submit-button">评论博客</el-button>
          </el-col>
        </el-row>
        <div v-for="comment in commentList" :key="'comment' + comment.commentId" class="comment">
          <el-row >
            <el-col :span="2">
              <!-- 用户头像 -->
              <el-avatar :size="55" :src="comment.userAvatar" class="user-avatar">
                <img src="@/assets/image/common/empty-user.png" alt=""/>
              </el-avatar>
            </el-col>
            <el-col :span="22" class="c-info">
              <!-- 用户名 -->
              <div class="user-name">
                {{ comment.userName }}
              </div>
              <p class="c-content">
                <span v-if="comment.topFlag === 0" class="stick">置顶</span>
                {{ comment.content}}
              </p>
              <div class="c-other">
                <span class="c-time">{{ comment.createTime.substring(0, comment.createTime.length - 3)}}</span>
                <span @click="userLikeCommentHandle(comment)" class="c-like">
                  <svg-icon icon-class="like" :class="!!comment.likeFlag ? 'like-color': ''" class="fz16"  />
                  {{ comment.likeNum > 0 ? comment.likeNum : '' }}
                </span>
                <span @click="showReplyElementHandle(comment)" class="c-reply">
                  回复
                </span>
                <div v-if="comment.authorLike === 0" class="author-like">
                  <span class="like-info">
                    作者点赞
                  </span>
                </div>
              </div>
              <div v-if="!!comment.childComments && comment.childComments.length > 0" class="c-reply-list">
                <div v-for="replyComment in comment.childComments" :key="'cC' + replyComment.commentId" class="c-r-info">
                  <el-row >
                    <el-col :span="1">
                      <!-- 回复用户头像 -->
                      <el-avatar :size="40" :src="replyComment.userAvatar">
                        <img src="@/assets/image/common/empty-user.png" alt=""/>
                      </el-avatar>
                    </el-col>
                    <el-col :span="22" class="c-r-content">
                      <p>
                        <span class="c-r-user-name">{{ replyComment.userName }}</span>
                        <span v-if="replyComment.parentUserName !== ''">回复</span>
                        <span v-if="replyComment.parentUserName !== ''" class="c-r-parent-user">@{{ replyComment.parentUserName }}:</span>
                        &nbsp;
                        <span class="fz14">{{ replyComment.content }}</span>
                      </p>
                      <div class="c-r-other">
                        <span class="c-r-time">{{ replyComment.createTime.substring(0, comment.createTime.length - 3)}}</span>
                        <span @click="userLikeCommentHandle(replyComment)" class="c-r-like">
                          <svg-icon icon-class="like" :class="!!replyComment.likeFlag ? 'like-color': ''" class="fz16"  />
                          {{ replyComment.likeNum > 0 ? replyComment.likeNum : '' }}
                        </span>
                        <span @click="showReplyElementHandle(replyComment)" class="c-r-reply">
                          回复
                        </span>
                        <div v-if="replyComment.authorLike === 0" class="author-like">
                          <span>
                            作者点赞
                          </span>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
                <div v-if="comment['pageIndex']" class="c-r-page">
                  <el-pagination
                    small
                    hide-on-single-page
                    layout="total, prev, pager, next"
                    :disabled="buttonLoad"
                    :page-size="10"
                    :current-page="comment['pageIndex']"
                    :total="comment.replyNum"
                    @current-change="childCommentPageHandle($event, comment)">
                  </el-pagination>
                </div>
              </div>
              <div v-if="comment.replyNum > 0 && !comment['pageIndex']" class="c-r-more">
                <span>共{{ comment.replyNum }}条回复，</span>
                <span @click="moreReplyHandle(comment)">点击查看</span>
              </div>
              <!-- 回复评论标签组 -->
              <el-row v-if="comment.blockId === replyInputVisible" class="c-reply">
                <el-col :span="2">
                  <!-- 用户头像 -->
                  <el-avatar :size="55" :src="avatar" class="user-avatar">
                    <img src="@/assets/image/common/empty-user.png" alt=""/>
                  </el-avatar>
                </el-col>
                <el-col :span="18">
                  <el-input
                    type="textarea"
                    :placeholder="'回复 @' + tempComment.userName + ':'"
                    :rows="3"
                    resize="none"
                    v-model="replyComment"
                    :disabled="!login"
                    maxlength="500"
                    show-word-limit
                  >
                  </el-input>
                </el-col>
                <el-col :span="4">
                  <el-button @click="saveReplyCommentHandle(comment)" :disabled="!login || buttonLoad" type="primary" style="margin-left: 10px; height: 70px;">回复评论</el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <div v-if="totalNum > 0" class="comment-page">
          <el-pagination
            hide-on-single-page
            layout="total, prev, pager, next, jumper"
            :disabled="buttonLoad"
            :page-size="10"
            :current-page="pageIndex"
            :total="totalNum"
            @current-change="getOneCommentListHandle($event)"
            class="page-tool">
          </el-pagination>
        </div>
        <div v-if="commentList.length === 0" class="empty">
          当前博客没有评论信息，快来评论吧！
        </div>
      </div>
    </el-col>

    <!-- 右侧空白 -->
    <el-col :span="5">
      <div @mouseenter="mouseEnterToolHandle" @mouseleave="mouseOutToolHandle" class="blog-tool">
        <transition name="el-zoom-in-bottom">
          <div v-show="visible">
            <div class="tool-item">
              <el-tooltip effect="light" :content="likeBlogTitle" placement="right">
                <svg-icon @click="likeBlogHandle" icon-class="like" class-name="fz20" :class="likeBlog ? 'icon-color': ''"  />
              </el-tooltip>
            </div>
            <div class="tool-item">
              <el-tooltip effect="light" :content="collectBlogTitle" placement="right">
                <svg-icon @click="collectBlogHandle" icon-class="collect" class-name="fz20" :class="collectBlog ? 'icon-color': ''" />
              </el-tooltip>
            </div>
          </div>
        </transition>

        <div :class="visible ? '' : 'show'" class="tool-item tool">
          工具栏
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
  import { colorList } from "assets/js/color";

  import 'quill/dist/quill.snow.css'    /* 富文本css*/

  /*
    博客详细信息页
   */
  export default {
    layout: 'default',
    data() {
      return {
        // 博客详细对象
        blog: {
          // 博客id
          blogId: undefined,
          // 博客标题
          title: undefined,
          // 博客类型
          label: undefined,
          // 博客所属用户名称
          userName: undefined,
          // 博客发布时间
          issueTime: undefined,
          // 博客被点赞数
          likeNum: undefined,
          // 博客被收藏数
          collectNum: undefined,
          // 博客被评论数
          commentNum: undefined,
          // 博客被浏览数
          viewNum: undefined,
          // 博客版权模块是否开启[0-开启 1-关闭]
          showStatement: undefined,
          // 博客是否开启评论[0-开启 1-关闭]
          openComment: undefined,
          // 博客正文内容
          content: undefined,
          // 博客关联的标签名称列表
          tagNames: []
        },
        // 按钮是否可被点击[false-可以被点击 true-不可被点击]
        buttonLoad: false,
        // 工具栏按钮是否显示
        visible: false,
        // 工具栏定时器
        toolTime: '',
        // 用户是否点赞过该博客（只有用户登录才显示）
        likeBlog: false,
        // 用户点赞博客按钮提示字
        likeBlogTitle: '点赞博客',
        // 用户是否收藏该博客（只有用户登录才显示）
        collectBlog: false,
        // 用户点赞博客按钮提示字
        collectBlogTitle: '收藏博客',
        // 博客浏览数量增加定时器
        viewTimer: undefined,
        // 博客评论输入框是否显示（当该值与博客评论的区块id相同时）
        replyInputVisible: '',
        // 回复的用户名称，用于在回复输入框中显示
        replyUsername: '',
        // 如果用户回复评论，则该字段存储被回复的评论对象
        tempComment: undefined,
        // 评论博客内容
        blogComment: '',
        // 互相评论或回复内容
        replyComment: '',
        // 第一级博客评论排序方式[0-按点赞排序（降序） 1-按时间排序（升序）]
        commentSort: 0,
        // 第一级博客评论-当前展示页码
        pageIndex: 1,
        // 第一级博客评论-当前页显示个数
        pageSize: 10,
        // 第一级博客评论总数
        totalNum: 0,
        // 第一级博客评论列表
        commentList: [],
      }
    },
    computed: {
      // 颜色列表
      colorList() {
        return colorList
      },
      // 用户头像
      avatar() {
        return this.$store.state.user.avatar
      },
      // 用户是否登录
      login() {
        return this.$store.state.user.status
      }
    },
    asyncData({ app, params, query, redirect } ) {
      /*if (!params.blogId) {
        return redirect('/')  // 重定向到首页面
      }
      return {
        blog : {
          blogId: params.blogId
        }
      }*/
      if (!params.blogId) {
        // 重定向到首页面
        return redirect('/')
      }
      let obj = {
        blogId: params.blogId,
        page: 1,
        limit: 10,
        // 排序字段
        field: 'like_num',
        // 降序排序
        order: 'descending'
      }
      return app.$axios.$post('/index/blog/info', obj)
        .then(({ data }) => {
          return {
            blog: data.blog,
            commentList: data.page.list,
            totalNum: data.page.totalNum
          }
        })
        .catch(err => {
          // 重定向到首页面
          return redirect('/')
        });
    },
    created() {
      /*if (process.server) {
        console.log('cccccccccc')
      }*/
      if (process.client) {
        // this.initBlogInfoHandle()

        this.viewTimer = setTimeout(() => {
          this.addBlogViewHandle()
          // 清除定时器
          clearTimeout(this.viewTimer)
        }, 2500)

        if (this.$store.state.user.status) {
          // 用户登录，查询用户是否点赞过该博客
          this.$axios.$get('/blog/user-blog/operation', { params: { blogId: this.blog.blogId}})
            .then(({ data }) => {
              this.likeBlog = data.likeBool
              this.likeBlogTitle = data.likeBool ? '取消点赞' : '点赞博客'
              this.collectBlog = data.collectBool
              this.collectBlogTitle = data.collectBool ? '取消收藏' : '收藏博客'
            })
            .catch(() => {})
        }
      }
    },
    beforeDestroy() {
      // 清除工具定时器
      clearTimeout(this.toolTime)
      // 清除浏览增加定时器
      clearTimeout(this.viewTimer)
    },
    methods: {
      // 返回首页
      backPageHandle() {
        this.$router.push('/')
      },
      // 初始化博客信息事件
      initBlogInfoHandle() {
        // 按钮不可被点击
        this.buttonLoad = true
        let obj = {
          blogId: this.blog.blogId,
          page: this.pageIndex,
          limit: this.pageSize,
          field: 'like_num',
          // 降序排序
          order: 'descending'
        }
        this.$axios.$post('/index/blog/info', obj)
          .then(({ data }) => {
            this.blog = data.blog
            this.commentList = data.page.list
            this.totalNum = data.page.totalNum
          })
          .catch(() => {
            this.$router.push('/')
          })
          .finally(() => {
            // 按钮恢复可点击
            this.buttonLoad = false
          })
      },
      // 工具栏鼠标移入事件
      mouseEnterToolHandle() {
        this.visible = true
        // 清除上一个定时器
        clearTimeout(this.toolTime)
      },
      // 工具栏鼠标移出事件
      mouseOutToolHandle() {
        let _this = this
        this.toolTime = setTimeout(function () {
          _this.visible = false
          clearTimeout(_this.toolTime)
        }, 300)
      },
      // 点赞/取消点赞 博客事件
      likeBlogHandle() {
        if (!this.login) {
          this.notify('', '操作提示', '登录之后方可进行点赞操作')
          return;
        }
        if (this.buttonLoad) {
          return
        }
        // 按钮不可被点击
        this.buttonLoad = true

        let obj = {
          blogId: this.blog.blogId,
          optType: 1,
          flag: !this.likeBlog
        }
        this.$axios.$post('/blog/user-blog/save/opt', obj)
          .then(() => {
            this.likeBlog = !this.likeBlog
            this.likeBlogTitle = this.likeBlog ? '取消点赞' : '点赞博客'
          })
          .catch(() => {})
          .finally(() => {
            // 按钮恢复可点击
            this.buttonLoad = false
          })
      },
      // 收藏/取消收藏 博客事件
      collectBlogHandle() {
        if (!this.login) {
          this.notify('', '操作提示', '登录之后方可进行收藏操作')
          return;
        }
        if (this.buttonLoad) {
          return
        }
        // 按钮不可被点击
        this.buttonLoad = true

        let obj = {
          blogId: this.blog.blogId,
          optType: 2,
          flag: !this.collectBlog
        }
        this.$axios.$post('/blog/user-blog/save/opt', obj)
          .then(() => {
            this.collectBlog = !this.collectBlog
            this.collectBlogTitle = this.collectBlog ? '取消收藏' : '收藏博客'
          })
          .catch(() => {})
          .finally(() => {
            // 按钮恢复可点击
            this.buttonLoad = false
          })
      },
      // 博客浏览次数添加事件
      addBlogViewHandle() {
        this.$axios.$get('/index/add/view', { params: { blogId: this.blog.blogId } })
          .then(() => {})
          .catch(() => {})
      },
      /**
       * 切换博客评论排序方式
       * @param index number 选中的排序类型[0-按点赞排序（降序） 1-按时间排序（升序）]
       */
      changeCommentSortHandle(index) {
        this.buttonLoad = true    // 按钮不可被点击
        // 记录旧的页码
        let oldPageIndex = this.pageIndex
        let commentVo = {
          blogId: this.blog.blogId,
          page: this.pageIndex = 1,
          limit: this.pageSize,
          field: index === 0 ? 'like_num' : 'create_time',
          order: index === 0 ? 'descending' : 'ascending'
        }
        this.$axios.$post('/index/comment/one/list', commentVo)
          .then(({data:page}) => {
            this.commentSort = index

            this.commentList = page.list
            this.totalNum = page.totalNum
          })
          .catch(() => {
            this.pageIndex = oldPageIndex
          })
          .finally(() => {
            this.buttonLoad = false      // 按钮恢复可点击
          })
      },
      /**
       * 分页获取第一级博客评论列表
       * @param pageIndex number 查询的页码
       */
      getOneCommentListHandle(pageIndex) {
        // 按钮不可被点击
        this.buttonLoad = true
        // 记录旧的页码
        let oldPageIndex = this.pageIndex
        let commentVo = {
          blogId: this.blog.blogId,
          page: this.pageIndex = pageIndex,
          limit: this.pageSize,
          field: this.commentSort === 0 ? 'like_num' : 'create_time',
          order: this.commentSort === 0 ? 'descending' : 'ascending'
        }
        this.$axios.$post('/index/comment/one/list', commentVo)
          .then(({data:page}) => {
            this.commentList = page.list
            this.totalNum = page.totalNum
          })
          .catch(() => {
            this.pageIndex = oldPageIndex
          })
          .finally(() => {
            // 按钮恢复可点击
            this.buttonLoad = false
          })
      },
      /**
       * 保存博客评论信息
       */
      saveCommentHandle() {
        if (!this.blogComment) {
          this.notify('warning', "提示", "请输入评论博客的信息。")
          return
        }
        // 按钮不可被点击
        this.buttonLoad = true
        let commentInfo = {
          // 博客id
          blogId: this.blog.blogId,
          //  用户评论博客或者回复评论信息
          content: this.blogComment
        }
        this.$axios.$post('/blog/user-blog/save/one/comment', commentInfo)
          .then(({ data:comment }) => {
            this.notify('success', '成功', '评论博客成功!')
            // 将最新评论信息添加到列表头部
            this.commentList.unshift(comment)
            // 第一级评论总数加一
            this.totalNum++
            // 评论博客内容清空
            this.blogComment = ''
          })
          .catch(() => {})
          .finally(() => {
            // 按钮恢复可点击
            this.buttonLoad = false
          })
      },
      /**
       * 保存子评论信息处理事件
       * @param oneComment object 第一级评论对象
       */
      saveReplyCommentHandle(oneComment) {
        if (!this.replyComment) {
          this.notify('warning', "提示", "请输入回复评论信息。")
          return
        }
        // 按钮不可被点击
        this.buttonLoad = true

        let tempComment = this.tempComment
        let commentInfo = {
          // 被回复评论id
          parentCommentId: tempComment.commentId,
          // 博客id
          blogId: this.blog.blogId,
          // 评论区块id
          blockId: tempComment.blockId,
          // 被评论用户id
          parentUserId: tempComment.userId,
          // 用户回复评论信息
          content: this.replyComment,
          page: undefined,
          limit: undefined,
          field: undefined,
          order: undefined,
        }
        let bool = oneComment.replyNum > 0 && !oneComment.childComments
        if (bool) {
          // 查询页码
          commentInfo.page = 1
          // 当前页显示个数
          commentInfo.limit = 10
          // 排序字段
          commentInfo.field = 'create_time'
          // 升序排序
          commentInfo.order = 'ascending'
        }
        this.$axios.$post('/blog/user-blog/save/child/comment', commentInfo)
          .then(({ data:childComments }) => {
            this.notify('success', '成功', '回复评论成功!')
            if (bool) {
              oneComment.childComments = childComments
              this.$set(oneComment, "pageIndex", 1)
            } else {
              if (oneComment.replyNum === 0) {
                oneComment.childComments = []
                this.$set(oneComment, "pageIndex", 1)
              }
              oneComment.childComments.unshift(...childComments)
            }
            oneComment.replyNum++
            // 回复或者互相回复内容清空
            this.replyComment = ''
          })
          .catch(() => {})
          .finally(() => {
            // 按钮恢复可点击
            this.buttonLoad = false
          })
      },
      /**
       * 查看子评论列表处理事件
       * @param {Object} comment 第一级评论信息对象
       */
      moreReplyHandle(comment) {
        // 按钮不可被点击
        this.buttonLoad = true
        let commentVo = {
          // 博客id
          blogId: this.blog.blogId,
          // 评论区块id默认为长度为0的字符串
          blockId: comment.blockId,
          // 查询页码
          page: 1,
          // 当前页显示个数
          limit: 10,
          // 排序字段
          field: 'create_time',
          // 升序排序
          order: 'ascending'
        }
        this.$axios.$post('/index/comment/child/list', commentVo)
          .then(({ data }) => {
            // console.log("childCommentList = ", childCommentList)

            comment.childComments = data
            this.$set(comment, "pageIndex", 1)
          })
          .catch(() => {})
          .finally(() => {
            this.buttonLoad = false      // 按钮恢复可点击
          })
      },
      // 回复评论处理事件
      showReplyElementHandle(comment) {
        if (this.replyInputVisible === comment.blockId) {
          // 如果重复两次点击评论的‘回复’按钮，则关闭回复评论组件
          this.replyInputVisible = ''
          return
        }
        this.replyInputVisible = comment.blockId
        this.tempComment = comment
      },
      /**
       * 子评论列表翻页处理事件
       * @param pageIndex number 最新页码
       * @param comment   object 第一级评论对象
       */
      childCommentPageHandle(pageIndex, comment) {
        // 按钮不可被点击
        this.buttonLoad = true
        // 记录旧的页码
        let oldPageIndex = comment.pageIndex
        let commentVo = {
          // 博客id
          blogId: this.blog.blogId,
          // 评论区块id默认为长度为0的字符串
          blockId: comment.blockId,
          // 查询页码
          page: comment.pageIndex = pageIndex,
          // 当前页显示个数
          limit: 10,
          // 排序字段
          field: 'create_time',
          // 升序排序
          order: 'ascending'
        }
        this.$axios.$post('/index/comment/child/list', commentVo)
          .then(({ childCommentList }) => {
            comment.childComments = childCommentList
          })
          .catch(() => {
            comment.pageIndex = oldPageIndex
          })
          .finally(() => {
            this.buttonLoad = false      // 按钮恢复可点击
          })
      },
      /**
       * 用户点赞/取消点赞博客评论事件
       * @param {Object} comment 博客评论对象
       */
      userLikeCommentHandle(comment) {
        if (!this.login) {
          this.notify('info', '操作失败', '登录之后方可点赞博客评论')
          return;
        }
        if (this.buttonLoad) {
          return
        }
        // 按钮不可被点击
        this.buttonLoad = true
        /*
          判断评论对象存不存在likeFlag属性
          1、如果存在，则说明用户已经点赞了该条评论，则发送请求取消用户点赞该条评论
          2、如果不存在，则说明用户没有点赞过该条评论，则发送请求保存用户点赞该条评论记录
        */
        let commentVo = {
          // 博客id
          blogId: this.blog.blogId,
          // 评论id
          commentId: comment.commentId,
          // 操作类型[0-点赞 1-取消点赞]
          type: comment.likeFlag ? 1 : 0
        }
        this.$axios.$post('/comment/manage/update/like', commentVo)
          .then(() => {
            // 该条评论的点赞数变化
            comment.likeNum += !comment.likeFlag ? 1 : -1;
            // 更新该条评论的‘点赞状态’
            comment.likeFlag = comment.likeFlag ? '' : '1'
            console.log(comment, 'comment')
          })
          .catch(() => {})
          .finally(() => {
            // 按钮恢复可点击
            this.buttonLoad = false
          })
      }
    }
  }
</script>

<!-- 页头样式 -->
<style scoped>
  .blog-details {
    margin: 25px 0;
    min-height: calc(100vh - 170px);
  }
  .blog-details .page-head {
    height: 50px;
    border-bottom: 1px solid #c4d7d6;
  }
  .page-head .back {
    margin-left: 5px;
    font-size: 15px;
    line-height: 50px;
    cursor: pointer;
  }
  .page-head .back:hover {
    color: #c4d7d6;
  }
  .page-head .separator {
    margin-left:7px;
    margin-right:7px;
    font-size: 17px;
  }
  .page-head .author {
    font-family: SimHei,serif;
    cursor: pointer;
  }
  .page-head .author:hover {
    color: #c4d7d6;
  }
  .page-head .number {
    color: #0e92b3;
  }
</style>

<style scoped>
  .blog-details .blog-title {
    height: 40px;
    margin-top: 10px;
    line-height: 40px;
    text-align: center;
    font-size: 24px;
    font-family: SimHei,serif;
  }
  .blog-details .blog-label {
    font-size: 14px;
    margin-left: 5px;
  }
  .blog-label .icon {
    font-size: 20px; color: rgb(248,168,168)
  }
  .blog-label .label-title {
    font-weight: normal;
    font-size: 15px;
  }
  .blog-details .blog-content {
    margin: 7px 0;
    border-radius: 7px;
  }
  .blog-details .blog-tags {
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 10px;
  }
  .blog-tags .tag {
    padding: 2px 10px;
    margin-left: 10px;
    border-radius: 10px;
    display: inline-block;
    font-size: 12px;
  }
  .blog-tags span:first-child {
    margin-right: 5px;
    font-weight: normal;
    font-size: 15px;
  }
  .blog-details .blog-statement span {
    font-weight: normal;
    font-size: 15px;
    cursor: auto;
  }
  .blog-details .blog-statement p {
    padding: 15px;
    margin-left: 20px;
    font-size: 14px;
    font-weight: normal;
    color: #e4bf11;
  }
</style>

<style scoped>
  .blog-details .blog-tool {
    position: fixed;
    right: 250px;
    bottom: 150px;
    z-index: 931;
  }
  .blog-tool .tool-item {
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-left: 1px solid #008489;
    border-right: 1px solid #008489;
    cursor: pointer;
  }
  .blog-tool .tool-item:first-child {
    border: 1px solid #008489;
    border-radius: 5px 5px 0px 0px;
  }
  .blog-tool .tool-item.tool {
    font-size: 14px;
    border: 1px solid #008489;
    border-radius: 0px 0px 5px 5px;
  }
  .blog-tool .tool-item.show {
    border-radius: 5px 5px 5px 5px;
  }
  .tool-item .icon-color {
    color: rgb(255,121,96);
  }
</style>

<style scoped>
   .pagination-button {
     color: #606266;
     font-size: 11px;
     padding: 3px 4px;
     border-radius: 3px;
     border: 1px solid #DCDFE6;
     background: #FFFFFF;
   }
   .pagination-button:hover {
     color: #17B3A3;
     border: 1px solid #17B3A3;
   }
</style>
<!-- 评论组件css -->
<style scoped>

.blog-comment .comment-header {
  margin-bottom: 25px;
  padding: 10px 0;
  border-bottom: 1px solid #e5e9ef;
}
.blog-comment .comment-header .c-sort {
  font-weight: bold;
  margin-right: 20px;
  cursor: pointer;
}
.blog-comment .comment-header .c-sort.active{
  color: #00a1d6;
}
.blog-comment .comment-header span:first-child {
  margin-right: 15px;
  font-weight: normal;
  font-size: 15px;
  cursor: auto;
}
.blog-comment .comment-reply .A {
  margin-bottom: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e9ef;
}
.blog-comment .comment-reply .A .submit-button {
  margin-left: 10px;
  height: 70px;
}
.blog-comment .comment-reply .avatar {
  height: 75px;
  line-height: 75px;
}
.blog-comment .comment-reply .avatar .user-avatar {
  margin-top: 10px;
  margin-left: 5px;
}
.blog-comment .comment {
  padding: 10px 0;
}
.blog-comment .comment .c-info {
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e9ef;
}
.blog-comment .comment .user-avatar {
  margin-left: 5px;
}
.blog-comment .c-info .user-name {
  color: #6d757a;
  font-size: 13px;
  padding-bottom: 4px;
}
.blog-comment .c-info .c-content {
  font-size: 14px;
  padding: 4px 0;
}
.blog-comment .c-info .c-content .stick {
  min-width: 30px;
  display: inline-block;
  text-align: center;
  font-size: 12px;
  color: #45c2b5;
  font-weight: normal;
  line-height: 18px;
  height: 18px;
  border: 1px solid #45c2b5;
  border-radius: 3px;
  margin-right: 5px;
}
.blog-comment .c-info .c-other, .c-info .c-reply-list .c-r-info .c-r-content .c-r-other {
  font-size: 13px;
  color: #99a2aa;
  padding-top: 4px;
}
.blog-comment .c-info .c-other .c-time, .blog-comment .c-info .c-reply-list .c-r-info .c-r-content .c-r-other .c-r-time {
  margin-right: 20px;
}
.blog-comment .c-info .c-other .c-like, .blog-comment .c-reply-list .c-r-info .c-r-content .c-r-other .c-r-like {
  cursor: pointer;
  margin-right: 15px;
}
.blog-comment .c-info .c-other .like-color,  .blog-comment .c-reply-list .c-r-info .c-r-content .c-r-other .like-color {
  color: rgb(255,121,96);
}
.blog-comment .c-info .c-other .c-reply, .blog-comment .c-reply-list .c-r-info .c-r-content .c-r-other .c-r-reply {
  cursor: pointer;
  padding: 0 5px;
}
.blog-comment .c-info .c-other .c-reply:hover, .blog-comment .c-reply-list .c-r-info .c-r-content .c-r-other .c-r-reply:hover {
  background: #F4F4F4;
  color: #45c2b5;
}
.blog-comment .c-info .c-other .author-like, .blog-comment .c-reply-list .c-r-info .c-r-content .c-r-other .author-like {
  margin-top: 10px;
}
.blog-comment .c-info .c-other .author-like span, .blog-comment .c-r-info .c-r-content .c-r-other .author-like span {
  background: #F4F4F4;
  color: #757575;
  display: inline-block;
  margin-right: 10px;
  padding: 5px 6px;
  line-height: 14px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 400;
}
.blog-comment .c-info .c-reply-list .c-r-info {
  padding: 10px 0;
}
.blog-comment .c-info .c-reply-list .c-r-info .c-r-content {
  margin-top: 4px;
  margin-left: 20px;
}
.blog-comment .c-info .c-reply-list .c-r-info .c-r-content .c-r-user-name {
  color: #6d757a;
  font-size: 13px;
}
.blog-comment .c-info .c-reply-list .c-r-info .c-r-content .c-r-parent-user {
  color: #00a1d6;
}
.blog-comment .c-info .c-r-more {
  font-size: 13px;
  color: #99a2aa;
  padding: 10px 0;
}
.blog-comment .c-info .c-r-more span:last-child {
  cursor: pointer;
  color: #00a1d6;
}
.blog-comment .c-info .c-reply-list .c-r-page {
  padding-top: 4px;
  padding-bottom: 10px;
}
.blog-comment .c-info .c-reply {
  margin-top: 20px;
}
.blog-comment .c-info .c-reply .user-avatar {
  margin-top: 10px;
  margin-left: 5px;
}
.blog-comment .comment-page {
  width: 100%;
  padding-top: 4px;
  padding-bottom: 10px;
  display: inline-flex;
  text-align: center;
}
.blog-comment .comment-page .page-tool {
  margin: 0 auto;
}
.blog-comment .empty {
  font-size: 15px;
  text-align: center;
  line-height: 50px;
}
</style>
